<template>
    <view class="g-page">
        <!-- 页眉 -->
        <view class="g-header" :style="{paddingTop: (nStatusBarHeight+20)+'px'}">
            <view class="m-btn" @tap="close">
                <close size="50" color="#000"></close>
            </view>
            <text class="u-login-text">登录</text>
            <text @tap="register">注册</text>
        </view>

        <!-- 内容 -->
        <view class="g-content-wrapper">
            <image class="u-logo" src="../../static/images/logo.png"></image>
            <form>
                <!-- 输入框 -->
                <label class="m-input-group" for="phone">
                    <image class="u-icon-input" src="../../static/icons/mobile.png" mode="widthFix"></image>
                    <input class="u-input u-input-mobile" id="phone" @input="checkPhone" @click="hideTabbar" @blur="showTabbar" @focus="hideTabbar" type="number" placeholder="请输入手机号码"
                        placeholder-class="placeholder" maxlength="11" v-model="oUserInfo.nPhone">
                    <button class="u-get-code" :class="[bPhone ? '' : 'z-get-code-disabled']" @tap="getCode">
                        {{nCountdown ? nCountdown+' s' : '获取验证码'}}
                    </button>
                </label>

                <!-- 输入框 -->
                <label class="m-input-group" for="code">
                    <image class="u-icon-input" src="../../static/icons/code.png" mode="widthFix"></image>
                    <input class="u-input" id="code" @input="checkCode" @click="hideTabbar" @blur="showTabbar" @focus="hideTabbar" type="number" placeholder="请输入验证码"
                        placeholder-class="placeholder" maxlength="6" v-model="oUserInfo.nCode">
                </label>

                <!-- 按钮 -->
                <button class="u-btn-login u-btn" :class="[bCode && bPhone ? '' : 'z-login-disabled']" @tap="login">登录</button>
            </form>
        </view>
        <view class="g-footer-text" v-if="tabbar">
            登录即代表您已同意<text class="u-protocol">《恒朗商城用户使用及隐私政策》</text>
        </view>
        <view class="m-loading" v-if="showLoading">
            <image src="../../static/images/loading.gif" mode="widthFix"></image>
            <text>加载中</text>
        </view>
		<view class="u-bg"><image src="../../static/images/login_bg.png" style="width: 100%" mode="widthFix"></image></view>
    </view>
</template>

<script>
	import henglang from '@/common/common.js';
    export default {
        data() {
            return {
                bPhone: false,
                bCode: false,
                nCountdown: 0,
                nStatusBarHeight: 0,
                showLoading: false,
                oUserInfo: {
                    nPhone: '',
                    nCode: '',
					nUnion_id: '',
                },
                pid: '',
                oServerData: {},
				tabbar: true,
				windowHeight: ''
            };
        },
        methods: {
            // 登录
            login() {
                let that = this;

                if (!this.bPhone) {
                    henglang.showToast('请输入正确的手机号码');
                    return;
                }
                if (!this.bCode) {
                    henglang.showToast('请输入正确的验证码');
                    return;
                }
                // 校检成功
			    this.showLoading = true;
				henglang.post('auth/login',{union_id: that.oUserInfo.nUnion_id,mobile: that.oUserInfo.nPhone,code: that.oUserInfo.nCode},false,function(res){
					that.showLoading = false;
					if (res.data.code == 0){
						henglang.showToast(res.data.msg,500);
						uni.setStorage({ // 保存登录状态
							key: 'token',
							data: res.data.data.token,
						});
						uni.setStorage({ // 保存用户的信息
							key: 'userInfo',
							data: res.data.data.member,
						});
						setTimeout(() => {
							uni.redirectTo({
								url:'/pages/user/user_index'
							});
						}, 500)
					}else{
						henglang.showToast(res.data.msg);
					}
					
				},function(res){
					that.showLoading = false;
				});
				
				
            },
            // 检查手机号
            checkPhone(e) {
                let nVal = e.target.value;
                let rPhone = /^1[34578]\d{9}$/g;
                if (rPhone.test(nVal)) {
                    this.bPhone = true;
                } else {
                    this.bPhone = false;
                }
            },
            // 检查验证码
            checkCode(e) {
                let rCode = /^\d{6}$/g;
                let nVal = e.target.value;

                if (rCode.test(nVal)) {
                    this.bCode = true;
                } else {
                    this.bCode = false;
                }
            },
            // 获取验证码
            getCode() {
                let timer = null;
                let that = this;
                if (!this.bPhone) {
                    henglang.showToast('请输入正确的手机号码');
                    return;
                }
                if (!this.nCountdown) {
					uni.showLoading({
						title: '正在发送'
					});
					henglang.post('auth/sendLoginVerify',{mobile: that.oUserInfo.nPhone},false,function(res){
						uni.hideLoading()
						if(res.data.code == '-2'){
							uni.showModal({
								title: '',
								content: res.data.msg + '，马上注册',
								success: function (res) {
									if (res.confirm) {
										uni.hideKeyboard()
										uni.navigateTo({
											url:'/pages/user/register'
										})		
									} else if(res.cancel){
										uni.hideKeyboard()
									}
								}
							});
						}else if(res.data.code == '0'){
							henglang.showToast(res.data.msg,500);
							that.codeDownTime()
						}else{
							henglang.showToast(res.data.msg);
						}
					},function(res){
						henglang.showToast('请求失败');
						that.nCountdown = false;
						return;
					});
                    
                }
            },
			codeDownTime(){
				let timer = null;
				this.nCountdown = 60;
				timer = setInterval(() => {
				    this.nCountdown = --this.nCountdown;
				    if (!this.nCountdown) {
				        this.nCountdown = false;
				        clearInterval(timer);
				    }
				}, 1000)
			},
            // 切换注册
            register() {
                uni.navigateTo({
                	url:'/pages/user/register'
                });
            },
            close() {
                uni.navigateBack();
            },
			showTabbar(){
				this.tabbar = true;
			},
			hideTabbar(){
				this.tabbar = false;
			}
        },
        onLoad(union_id) {
			let that = this
			that.oUserInfo.nUnion_id = union_id.unid;
			uni.getSystemInfo({
			    success(res) {
					that.windowHeight = res.windowHeight;
					if(res.statusBarHeight === 20){
						that.nStatusBarHeight = 0;
					}else{
						that.nStatusBarHeight = res.statusBarHeight;
					}
			    }
			});
			uni.onWindowResize((res) => {
		        if(res.size.windowHeight < that.windowHeight){
		            that.tabbar = false
		        }else{
		            that.tabbar = true
		        }
		    })
        }
    }
</script>

<style>
	.g-page {
	    font-size: 28upx;
	    background-color: #f6f6f6;
	    height: 100vh;
		position: relative;
		z-index: 1;
	}
	.u-bg {
	    position: fixed;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    width: 100%;
		z-index: -1;
	}
	
    /* 页眉 */
    .g-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9;
        font-size: 30upx;
        width: 100%;
        padding: 34upx;
        box-sizing: border-box;
    }

    .u-login-text {
        font-size: 38upx;
    }

    /* 主体内容 */
    .g-content-wrapper {
        position: absolute;
        z-index: 2;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 70%;
    }

    .u-logo {
        width: 194upx;
        height: 194upx;
        display: block;
        margin: 0 auto 170upx;
    }

    .m-input-group {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #dfdfdf;
        padding: 14upx 0;
        position: relative;
    }

    .u-icon-input {
        width: 34upx;
        margin: 0 20upx;
    }

    .u-input-mobile {
        padding-right: 180upx;
    }

    .u-input {
        box-sizing: border-box;
        flex: 1;
    }

    .placeholder {
        font-size: 34upx;
        color: #939393;
    }

    .u-get-code {
        padding: 8upx 15upx;
        font-size: 24upx;
        border-radius: 50upx;
        color: #e60a01;
        border: 1px solid #e60a01;
        position: absolute;
        right: 0;
    }

    /* 按钮 */
    .u-btn {
        font-size: 38upx;
        border-radius: 100upx;
        margin-top: 34upx;
        padding: 32upx 0;
    }

    .u-btn-login {
        color: #fff;
        background: #d71311;
    }

    .u-btn-weixin {
        border: 1px solid #D71311;
        color: #D71311;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .u-btn-weixin image {
        width: 65upx;
        margin-right: 20upx;
    }

    .z-login-disabled {
        background: #ccc;
    }

    .z-get-code-disabled {
        color: #ccc;
        border-color: #ccc;
    }

    .g-footer-text {
        position: absolute;
        width: 100%;
        bottom: 20upx;
        font-size: 24upx;
        text-align: center;
    }

    .u-protocol {
        color: #D71311;
    }
</style>
